<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>

	<head>

		<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery-ui.css" />
		<title>Mon HOMEPAGE NGUYEN DO DANG KHOA - jQueryUI</title>
		<script src="{{ STATIC_URL }}jquery-1.10.2.min/jquery-1.10.2.min.js"></script>
		<script src="{{ STATIC_URL }}jquery-ui-1.10.3/ui/jquery-ui.js"></script>
		<script>
			//Creation de l'accordeon
			$(function() {
				$("#accordion").accordion();
			});

			//Création de button
			$(function() {
				$("b,.vider").button().click(function(event) {
					event.preventDefault();
				});
			});
			//Supprimer et reactualiser la page
			jQuery(document).ready(function($) {

				// -----------------------------------------------
				// Suppression de ligne lors du clic sur supprimer
				// -----------------------------------------------

				$('#liste-films div b').click(function(e) {
					$(this).parent().remove();
				});

				// -------------------------
				// Ajout de nouvelles lignes
				// -------------------------
				$('#handle-liste-films').click(function(e) {
					e.preventDefault();

					// On demande à l'utilisateur d'entrer du texte
					var texte = prompt("Entrez le texte à placer dans #liste-films");

					// Création de l'élément nouvelle_ligne
					var nouvelle_ligne = $('<div><span style="color:red; display:inline;">' + texte + '</span> - <b>supprimer cette ligne</b></div>');

					// On ajoute (bind) la fonction qui supprime cette nouvelle ligne quand on clique sur supprimer
					nouvelle_ligne.children('b').click(function(e) {
						nouvelle_ligne.remove();
					});

					// Ajout de ce nouvel élément à notre liste
					$('#liste-films').append(nouvelle_ligne);
				});

				// -----
				// Vider
				// -----
				$('#liste-films div .vider').click(function(e) {
					$(this).siblings('div').remove();
				});
			});
			//Auto completion
			$(function() {
				var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
				$("#tags").autocomplete({
					source : availableTags
				});
			});
		</script>

	</head>

	<body>
		<h1>Ma journée</h1>

		<ul>
			<li>
				Fraises
			</li>
			<li>
				Framboises
			</li>
			<li>
				Cerises
			</li>
		</ul>

		<div id="accordion">
			<h3>Section 1</h3>
			<div>
				<h3>Desciption</h3>
				<p>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
					ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
					amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
					odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</p>
				<ol>
					<li>
						Je me lève.
					</li>
					<li>
						Je mange et je bois.
					</li>
					<li>
						Je retourne me coucher.
					</li>
				</ol>
				<div id="liste-films">
					<div>
						<span style="color:red; display:inline;">Toy Story</span> - <b>supprimer cette ligne</b>
					</div>
					<div>
						<span style="color:red; display:inline;">Star Wars</span> - <b>supprimer cette ligne</b> - <a class="vider">vider</a>

						<div>
							<span style="color:red; display:inline;">Star Wars - episode I</span> - <b>supprimer cette ligne</b>
						</div>
						<div>
							<span style="color:red; display:inline;">Star Wars - episode II</span> - <b>supprimer cette ligne</b>
						</div>
					</div>
				</div>
			</div>
			<h3>Rechercher un truc</h3>
			<div>
				<p>
					<h3>Tapez ce qu'il faut chercher on vous suggère des choses par la suite</h3>
				</p>
				<div class="ui-widget">
					<label for="tags">Tags: </label>
					<input id="tags" />
				</div>
			</div>
			<h3>Section 3</h3>
			<div>
				<p>
					Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
					Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
					ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
					lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
				</p>
				<ul>
					<li>
						List item one
					</li>
					<li>
						List item two
					</li>
					<li>
						List item three
					</li>
				</ul>
			</div>
			<h3>Section 4</h3>
			<div>
				<p>
					Cras dictum. Pellentesque habitant morbi tristique senectus et netus
					et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
					faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
					mauris vel est.
				</p>
				<p>
					Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
					Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
					inceptos himenaeos.
				</p>
			</div>
		</div>
	</body>
</html>
